<template>
  <div class="block">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="近30天热销商品" name="first">
        <ul v-if="dataset">
          <li v-for="(item, i) in dataset.data.slice(0, 10)" :key="i">
            <i></i>
            <div class="listCtn">
              <div class="listCtn_main">
                <div class="name">{{ item.FDESC }}</div>
                <div class="amount">{{ item.FAMOUNT + item.FUNIT }}</div>
              </div>
              <div class="specs">{{ item.FSPEC }}</div>
            </div>
          </li>
          <li v-if="isHotGoodsShow">
            <div @click="jumpSales" style="color: #409eff; cursor: pointer">
              更多
            </div>
          </li>
        </ul>
      </el-tab-pane>
      <el-tab-pane label="缺货预警" name="second">
        <ul v-if="qhDataset">
          <li v-for="(item, i) in qhDataset.data.slice(0, 10)" :key="i">
            <i></i>
            <div class="listCtn">
              <div class="listCtn_main">
                <div class="name">{{ item.FDESC }}</div>
                <div class="amount red">{{ item.FAMOUNT + item.FUNIT }}</div>
              </div>
              <div class="specs">{{ item.FSPEC }}</div>
            </div>
          </li>
          <li v-if="isqhShow">
            <div @click="jumpQh" style="color: #409eff; cursor: pointer">
              更多
            </div>
          </li>
        </ul>
      </el-tab-pane>
      <el-tab-pane label="积货预警" name="third">
        <ul v-if="jhDataset">
          <li v-for="(item, i) in jhDataset.data.slice(0, 10)" :key="i">
            <i></i>
            <div class="listCtn">
              <div class="listCtn_main">
                <div class="name">{{ item.FDESC }}</div>
                <div class="amount red">{{ item.FAMOUNT + item.FUNIT }}</div>
              </div>
              <div class="specs">{{ item.FSPEC }}</div>
            </div>
          </li>
          <li v-if="isjhShow">
            <div @click="jumpJh" style="color: #409eff; cursor: pointer">
              更多
            </div>
          </li>
        </ul>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import baseView from "@/views/base";
import { utils } from "hi-ui";
import dataViewCfg from "./dataset.js";
import dataViewCfg2 from "../../warning/lack/dataset.js";

export default {
  name: "hotList",
  extends: baseView,
  components: {},
  data() {
    return {
      mainTitle: "近30天热销商品",
      dataset: null,
      qhDataset: null,
      jhDataset: null,
      dataViewCfg: dataViewCfg,
      dataViewCfg2: dataViewCfg2,
      activeName: "first",
      isHotGoodsShow: false,
      isqhShow: false,
      isjhShow: false,
    };
  },
  computed: {},
  watch: {},
  methods: {
    //跳转销售明细
    jumpSales() {
      this.openByPath("/sales/salesDetail", null, {});
    },
    //跳转缺货
    jumpQh() {
      this.openByPath("/warning/lack", null, {});
    },
    //跳转积货
    jumpJh() {
      this.openByPath("/warning/overflow", null, {});
    },
    handleClick(tab, event) {
      switch (tab.name) {
        case "first":
          this.mainTitle = "近30天热销商品";
          this.dataset.load();
          break;
        case "second":
          this.mainTitle = "缺货预警";
          this.qhDataset.load();
          break;
        case "third":
          this.mainTitle = "积货预警";
          this.jhDataset.load();
          break;
      }
    },
  },
  mounted() {
    //创建主数据集
    this.dataset = this.$dsContainer.createDataSet(this.dataViewCfg);
    this.qhDataset = this.$dsContainer.createDataSet(this.dataViewCfg2);
    this.jhDataset = this.$dsContainer.createDataSet(
      Object.assign({}, this.dataViewCfg2, { id: this.dataViewCfg2.id + "jh" })
    );
    this.qhDataset.on("beginload", (param) => {
      if (!param) {
        param = new dataHelper.queryHelper.Param();
        param.where = new dataHelper.queryHelper.Where();
      }
      param.where.lteq("FQH", 0);
      param.where.noteq("FQH", 0);
    });
    this.jhDataset.on("beginload", (param) => {
      if (!param) {
        param = new dataHelper.queryHelper.Param();
        param.where = new dataHelper.queryHelper.Where();
      }
      param.where.lteq("FJH", 0);
      param.where.noteq("FJH", 0);
    });
    //默认加载热门商品
    this.dataset.load().then(() => {});
    this.dataset.on("afterload", (response, data) => {
      if (data && data.length > 10) {
        this.isHotGoodsShow = true;
      }
    });
    this.qhDataset.on("afterload", (response, data) => {
      if (data && data.length > 10) {
        this.isqhShow = true;
      }
    });
    this.jhDataset.on("afterload", (response, data) => {
      if (data && data.length > 10) {
        this.isjhShow = true;
      }
    });
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.block {
  height: 100%;
  $titleH: 60px;
  * {
    margin: 0;
    padding: 0;
  }
  /*h2{
        height:$titleH;
        line-height:$titleH;
        font-size: 16px;
        padding:0 20px;
        font-weight: bold;
    }*/
  /deep/.el-tabs {
    height: 100%;
    .el-tabs__header {
      padding: 0 15px;
    }
    .el-tabs__content {
      height: calc(100% - #{$titleH});
      .el-tab-pane {
        height: 100%;
      }
    }
  }
  ul {
    $liNum: 6;
    list-style: none;
    padding: 0 20px;
    height: 100%;
    overflow: auto;

    li {
      $liH: calc(100% / #{$liNum});
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 100%;
      height: $liH;
      min-height: 60px;
      border-top: 1px solid #eee;
      i {
        background-color: #ff6877;
        display: block;
        height: 25px;
        width: 6px;
      }
      .listCtn {
        flex: 1;
        padding: 0 20px;
        .listCtn_main {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .name {
            flex: 1;
          }
          .amount {
            width: 100px;
            text-align: right;
            &.red {
              color: #f56c6c;
            }
          }
        }
        .specs {
          font-size: 12px;
        }
      }
    }
    @while $liNum + 4>0 {
      li:nth-child(#{$liNum + 4}) i {
        filter: hue-rotate(random(360) * 1deg);
      }
      $liNum: $liNum - 1;
    }
  }
}
</style>
